<template>
    <div class="home">
        <a-layout has-sider>
            <a-layout-sider
                :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0, zIndex:10 }"
                collapsible
                v-model:collapsed= "collapsed"
                :trigger="null"
                :width="asideWidth"
                :default-collapsed="defaultCollapsed"
                :collapsed-width="collapsedWidth"
            >
                <div class="logo">
                    <div class="logo-img">
                        <a-avatar :src="logoUrl" :size="logoSize"/>
                    </div>
                    <template v-if="!collapsed">
                        <div class="appName">
                            {{APP_CONSTANT.APP_NAME}}
                        </div>
                    </template>
                </div>
                <navMenu/>
            </a-layout-sider>
            <a-layout v-model:style="mainLayoutStyle">
                <a-layout-header :style="headersLayoutStyle" ref="headerRef">
                    <navHeader :collapsed="collapsed" @collapse="collapse"/>
                </a-layout-header>
                <a-layout-content :style="contentLayoutStyle">
                    <div :style="{ background: '#fff', textAlign: 'center' , width: '100%', minHeight: `calc(100vh - 70px - 60px)`}">
                        <router-view/>
                    </div>
                </a-layout-content>
                <a-layout-footer :style="{ textAlign: 'center' , height: '60px'}">
                    他强任他强，清风拂山岗～
                </a-layout-footer>
            </a-layout>
        </a-layout>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import navMenu from "@/components/nav-menu"
import navHeader from "@c/nav-header/src/nav-header.vue";
import {LayoutHeader} from "ant-design-vue";
import {APP_CONSTANT} from "@/configs/constants";
import logoUrl from "@/assets/img/logo.svg";

const logoSize = ref<number>(30);
const showAppName = ref<boolean>(true);
const collapsedWidth = ref<number>(50);
const asideWidth = ref<number>(250);
const defaultCollapsed = ref<boolean>(false);
const collapsed = ref<boolean>(false);
const headerRef = ref<InstanceType<typeof LayoutHeader>>();

const headersLayoutStyle = ref({ background: '#fff', padding: 0 ,position: 'fixed', zIndex: 1, width: '100%' , height: '65px'});
const contentLayoutStyle = ref({ margin: '70px 16px 0', width: `calc(100%-32px)`, flex:1, backgroupdColor: '#EFF2F5'});
const mainLayoutStyle = ref({ marginLeft: `250px` , minHeight: '100vh' });

onMounted(() => {
    headersLayoutStyle.value.width = `calc(100% - ${asideWidth.value}px)`;
})

const collapse = () => {
    console.log(collapsed.value)
    collapsed.value = !collapsed.value;
    console.log(collapsed)
    if (collapsed.value){
        logoSize.value = 20;
        mainLayoutStyle.value.marginLeft = `${collapsedWidth.value}px`
        headersLayoutStyle.value.width = `calc(100% - ${collapsedWidth.value}px)`;
    }else{
        logoSize.value = 30;
        mainLayoutStyle.value.marginLeft = `${asideWidth.value}px`
        headersLayoutStyle.value.width = `calc(100% - ${asideWidth.value}px)`;
    }
}

</script>

<style scoped lang="less">
.headersLayoutStyle{
    display: flex;
}
.logo{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #000D17;

    .appName{
        color: #9BA3AB;
        font-weight: bold;
        margin-left: 10px;
        font-size: 16px;
    }
}
</style>

